<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm"  ref="dialogForm" :rules="rules" :label-width="formLabelWidth">
			<el-tabs v-model="activeName" type="card" >

				 <el-tab-pane label="审核表单" name="1">

			    	<el-form-item label="电子合同" >
					    <el-checkbox-group v-model="dialogForm.contractTemplateInfoList">
						      <el-checkbox  v-for="(item,index) in dialogForm.contractTemplateInfo" :label="item.id" :key="index">{{item.name}}</el-checkbox>
				 		</el-checkbox-group>
					</el-form-item>
                    <!-- <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
                    {{toggle}} -->
			        <el-form-item label="退回到" > 
				      <el-radio-group  v-model="dialogForm.fromStatus" >
					      <el-radio :label="0"  >二审不通过 </el-radio>
					      <el-radio :label="1"  >废弃合同 </el-radio>
					   </el-radio-group>
				    </el-form-item>
				    <el-form-item label="备注" >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.comment" auto-complete="off"  ></el-input>
				    </el-form-item>

				</el-tab-pane>

				<el-tab-pane label="汽车信息" name="2">
			    	
				    <el-form-item label="汽车车型"  disabled>
				     	<el-input  v-model="dialogForm.carBrandNameAndCarName" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="汽车颜色"  disabled>
				        <el-input  v-model="dialogForm.color	" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				   
			    </el-tab-pane>
			    <el-tab-pane label="上游供应商信息" name="3">
			    	
				    <el-form-item label="供应商名称" >
				      <el-input  v-model="dialogForm.supplierName" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="提车地址" >
				      <el-input  type="textarea" :rows=3 v-model="dialogForm.supplierAddress" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="提车联系人"  class="half">
				      <el-input  v-model="dialogForm.supplierPerson" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="联系人手机号"  class="half">
				      <el-input  v-model="dialogForm.supplierPhone" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    
				    <el-form-item label="收款账号"  class="half">
				      <el-input  v-model="dialogForm.accountNumber" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="收款人姓名"  class="half">
				      <el-input  v-model="dialogForm.accountName" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="开户行名称"  class="half">
				      <el-input  v-model="dialogForm.openningBank" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="备用收款账号"  class="half">
				      <el-input  v-model="dialogForm.accountNumberBak" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="备用收款人姓名"  class="half">
				      <el-input  v-model="dialogForm.accountNameBak" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="备用开户行名称"  class="half">
				      <el-input  v-model="dialogForm.openningBankBak" auto-complete="off" disabled ></el-input>
				    </el-form-item>

			    </el-tab-pane>

			    <el-tab-pane label="金额信息" name="4">
			    	<el-form-item label="借款时长" >
			    	    <!-- <el-select 
		                    	v-model="dialogForm.description" 
		                    	placeholder="请选择借款时长"  
		                    	:disabled="!isAdd.bool" 
		                    	>
						       <el-option    
	                            v-for="(item,index) in dialogForm.carOrderDurationList" 
	                             :key="item.index"
	                             :label="item.name"  
	                             :value="item.description"  
	                             
	                             >  
		                       </el-option>  
						    </el-select>  --> 
			    	  <template  v-for="(item,index) in dialogForm.carOrderDurationList" > 
			    	  		<el-input :value="item.description" auto-complete="off" :key="index" disabled ></el-input>
			    	  </template>
				      
				    </el-form-item>
				  	<el-form-item label="汽车数量" >
				      <el-input  v-model="dialogForm.amount" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="购车总价格"  class="currency">
				      <el-input  :value="dialogForm.totalPrice |toFixed2 " auto-complete="off" disabled ></el-input>
				      <span class="convertCurrency">{{dialogForm.totalPrice|convertCurrency}}</span>
				    </el-form-item>
				  	<el-form-item label="定金金额"  class="currency">
				      <el-input  :value="dialogForm.earnest |toFixed2 " auto-complete="off" disabled ></el-input>
				      <span class="convertCurrency">{{dialogForm.earnest|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="申请垫资金额"  class="currency">
				      <el-input  :value="dialogForm.paymentAmount |toFixed2 " auto-complete="off" disabled ></el-input>
				      <span class="convertCurrency">{{dialogForm.paymentAmount|convertCurrency}}</span>
				    </el-form-item>
				  	<el-form-item label="保证金金额"  class="currency">
				      <el-input  :value="dialogForm.deposit |toFixed2 " auto-complete="off" disabled ></el-input>
				      <span class="convertCurrency">{{dialogForm.deposit|convertCurrency}}</span>
				    </el-form-item>
				    
				    <!-- <el-form-item label="备用收款信息" >
				      <el-button  type="primary" @click="activeShow=!activeShow">{{activeShow?"收 起":"展 开"}}</el-button>
				    </el-form-item>
				    <div v-if="activeShow" >
				    	<el-form-item label="备用收款账号" >
				    					      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    					    </el-form-item>
				    					    <el-form-item label="备用收款人姓名" >
				    					      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    					    </el-form-item>
				    					    <el-form-item label="备用开户行名称" >
				    					      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    					    </el-form-item>
				    </div> -->
				  	<el-form-item label="打款备注" >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.remark" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    
			    </el-tab-pane>
			   
			    <el-tab-pane label="图片信息" name="5"> 

				    <el-form-item   label="供应商收款账号" >
			          	<pictureList :images="qiniuImage.image_uri" :id="qiniuImage.id"></pictureList>   
				    </el-form-item>
				    <el-form-item label="上游购销合同" >
				      	<pictureList :images="qiniuImage2.image_uri" :id="qiniuImage2.id"></pictureList>   
				    </el-form-item>

				  	<el-form-item label="定金凭证"  >
				  		<pictureList :images="qiniuImage3.image_uri" :id="qiniuImage3.id"></pictureList>   
				    </el-form-item> 
				   
			    </el-tab-pane>
 			    
			</el-tabs>
			<div style="text-align:right;margin-top:15px;">
				 <el-button @click="returnBack">返 回</el-button>
				 <el-button  v-if="isAdd.bool" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
			</div>
		</el-form>
	</div>
</template>

<script  th:inline="javascript">
 /*<![CDATA[*/
    var test = 1;
    import qiniu from '@/views/qiniu/upload';
    import agentHttp from '@/utils/agentHttp.js'
    import keyboardEvent from '@/utils/keyboardEvent'
    import pictureList from '@/views/pictureList/index'
	export default{
		created(){
			this.getContractinfo(); 
            keyboardEvent(this,5);
        },
		props:['dialogFormVisible','query','isAdd','tableData','rowData'],
		components:{qiniu,pictureList},
		data(){
			return{
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{ 
		          
		        },
		      
		        rules: {
		          name: [{ required: true, message: '请输入经销商名称', trigger: 'blur' }],
		          qckx:[{ required: true, message: '请输入提车地址(启运地)', trigger: 'blur' }]
		        },
		        dialogImageUrl:"",
		        dialogVisible:false,
		        activeShow:false,
		        activeName:"1",
		        qiniuImage:{
		        	id:"qiniuImage",    
		        	image_uri:[],    
		        	uploadSuccess:0  
			    },
			    qiniuImage2:{
		        	id:"qiniuImage2",    
		        	image_uri:[],    
		        	uploadSuccess:0  
			    },
			    qiniuImage3:{
		        	id:"qiniuImage3",    
		        	image_uri:[],    
		        	uploadSuccess:0  
			    }
			}
		},methods:{
			returnBack(){
				this.dialogFormVisible.bool=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if( this.dialogForm.fromStatus > 0){
		          		if( this.dialogForm.contractTemplateInfoList.length <= 0){
		          			this.$message.warning('废弃合同:需要选中至少一个合同.'); 
		          			this.dialogFormVisible.bool = true;
		          			return false;
		          		}
		          	}
		          	else {
		          		if(null == this.dialogForm.comment || "" === this.dialogForm.comment){
		          			this.$message.warning('二审不通过:需要填写备注信息.'); 
		          			this.dialogFormVisible.bool = true;
		          			return false;
		          		}
		          	}
		          	this.dialogForm.orderId = this.dialogForm.id; 
		          	//调用父组件方法
	          		  
			        agentHttp.postJson('adminApi/admin/contractinfo/invalid_contract',this.dialogForm).then((data)=>{
		              if(data.success){   
		              		this.$emit('refreshTableData',null); 
	            			this.$message.info( data.data); 
	            			this.dialogFormVisible.bool = false;

		               } 
		        	})	 
		          	 
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
			},
			handleRemove(file, fileList) {
		        console.log(file, fileList);
		    },
		    handlePictureCardPreview(file) {
		        this.dialogImageUrl = file.url;
		        this.dialogVisible = true;
		    },
		    getContractinfo(){ 
			    agentHttp.get('adminApi/admin/contractinfo/get_contractinfo/'
			    	+parseInt(this.rowData.carOrderId)).then((data)=>{
	              if(data.success){  
	              	    this.dialogForm = data.data;
	              	    this.$set(this.dialogForm,'contractTemplateInfoList',[]);
	              	    this.$set(this.dialogForm,'fromStatus',0);
	              	    //this.$set(this.dialogForm.contractTemplateInfoList,  data.data.contractTemplateInfoList);
	              		 	//this.dialogForm.contractTemplateInfoList=[];
            			
	              		//this.dialogForm = data.data;
	              		this.dialogForm.contractTemplateInfoList=[];
	              		//console.log(this.dialogForm)
	              		//供应商收款账号
	              		if( this.dialogForm.supplierInfoPic){
	              			this.qiniuImage.image_uri = this.dialogForm.supplierInfoPic.split(',');
	              		}
	              		//上游购销合同 
	              		if(this.dialogForm.contracts){
	              			this.qiniuImage2.image_uri = this.dialogForm.contracts.split(',');
	              		}
	              		//定金凭证
	              		if(this.dialogForm.depositPic){
							this.qiniuImage3.image_uri = this.dialogForm.depositPic.split(',');
	              		}  
	              		//this.dialogForm.carBrandNameAndName = this.dialogForm.carBrand+this.dialogForm.carName;
	              		
	              		//选中当条记录的合同ID
	              		this.dialogForm.contractTemplateInfoList.push(this.rowData.id);
	              		/*this.$nextTick(()=>{
	              		 	this.dialogForm.contractTemplateInfoList=[];
            			});*/
            			
	               } 
	        	})
		    }
		} 
	};
		/*]]>*/
</script>
